<div class="bd-content">
<h1 class="bd-title" id="content">屏幕阅读器</h1>
          <p class="bd-lead">使用screenreader工具隐藏除屏幕阅读器之外的所有设备上的元素。</p>
          <p>透过 <code class="highlighter-rouge">.sr-only</code>将一个元素对所有设备隐藏，<strong>除了屏幕阅读器</strong>，只有屏幕阅读器可以读取到 <code class="highlighter-rouge">.sr-only</code> 中的内容。 将 <code class="highlighter-rouge">.sr-only</code> 于 <code class="highlighter-rouge">.sr-only</code> with <code class="highlighter-rouge">.sr-only-focusable</code> 结合，以便在其被 focused 时再次显示该元素（例如通过键盘使用）。也可以用作 Sass mixins。</p>
<div class="bd-example">
<a class="sr-only sr-only-focusable" href="#content">跳到主要内容</a>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">&gt;</span>Skip to main content<span class="nt">&lt;/a&gt;</span></code></pre></figure>

<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a mixin</span>
<span class="nc">.skip-navigation</span> <span class="p">{</span>
  <span class="k">@include</span> <span class="nd">sr-only</span><span class="p">;</span>
  <span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
</div>
